<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<!-- v-cloak： 在script vue解析之前，div里有个v-cloak属性，在style样式终展示为none
    在vue解析之后，会删除掉v-cloak属性
    v-clock以后不会使用了，这些模板会被渲染成函数，虚拟dom
-->
<div id="app" v-cloak>
    <h2>{{message}}</h2>
</div>


<script src="../../js/vue.js"></script>

<script>
    /*模拟此处卡顿延迟两秒钟*/
    setTimeout(function () {
        const vue = new Vue({
            el: "#app",
            data: {
                message: "Hello vue,你好！"
            }
        })
    },2000);
</script>
</body>
</html>